<template>
	<view :class="AppStyle">
		<view style="min-height: 10rpx;">
			<view class="header" :style="[{height:CustomBar + 'rpx'}]">
				<view class="cu-bar bg-white-alpha"
					:style="{'height': CustomBar + 'rpx','padding-top':StatusBar + 'rpx'}">
					<view class="search-form radius" :style="[{top:StatusBar + 'px'}]">
						<text class="cuIcon-search"></text>
						<input v-model="searchText" :adjust-position="false" type="text" placeholder="搜索热门话题"
							confirm-type="search"></input>
						<view class="search-close" v-if="searchText!=''" @tap="searchClose()"><text
								class="cuIcon-close"></text></view>
					</view>
					<view class="action">
						<text class="text-blue" @tap="searchTag()">搜索</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-his">
			<view class="search-his-nav">
				<view class="search-his-label-left">
					<text class="search-his-title-left">最近搜索</text>
				</view>
				<view class="search-his-label-right">
					<text class="search-his-title-right">删除</text>
					<i class="zi zi_trashalt margin-10"></i>
				</view>
			</view>

			<!-- 搜索记录，最多展示6个 -->
			<view class="search-box">
				<view v-for="(item, index) in tagList" :key="index" class="search-box-item">
					<text class="search-box-item-prefix">#</text> {{ item.title }}
				</view>
			</view>
		</view>
		
		<!-- 搜索列表 -->
		<view class="">
			<block v-for="(item,index) in contentsList" :key="index">
				<articleItem :item="item"></articleItem>
			</block>
			
			<view class="load-more">
				<text>{{moreText}}</text>
			</view>
		</view>

	</view>

</template>

<script>
	import articleItem from '@/components/articleItem.vue';
	export default {
		components: {
			articleItem
		},
		data() {
			return {
				AppStyle: 'bg-wite-page',
				CustomBar: 100,
				StatusBar: this.StatusBar,
				searchText: '',
				type: 0,
				tagList: [{
						title: '钟某某后续'
					},
					{
						title: '我龙哥威武'
					},
					{
						title: '我龙哥威武eee'
					},
					{
						title: '春节到底能不能调休'
					},
					{
						title: '年轻人为什么总是喜欢躺平'
					},
				],
				contentsList: 
					[
						{
							"title": "测试不带图的话题",
							"isTop": 1,
							"markdown": 1,
							"content": "测试内容内容内容内容测试内容内容内容内容测试内容内容内容内容测试内容内容内容内容",
							"commentsNum": 4,
							"views": 46,
							"image": "",
							"created": 1673583060,
							"id": 232
						},
						{
							"title": "测试带图话题！",
							"isTop": 0,
							"content": "测试狄格儿内容哈哈哈哈啊Hass地方撒旦",
							"commentsNum": 3,
							"views": 686903,
							"image": "https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/27/e774daa9-2722-49b4-a1d1-6f8eb9823df9.JPG",
							"created": 1661534576,
							"id": 232
						},
						{
							"isAds": true,
							"url": "https://www.baidu.com",
							"title": "测试广告标题",
							"isTop": 0,
							"content": "测试狄格儿内容哈哈哈哈啊Hass地方撒旦",
							"commentsNum": 3,
							"views": 686903,
							"image": "https://eyunapp-1300649801.cos.ap-nanjing.myqcloud.com//img//2022/8/27/e774daa9-2722-49b4-a1d1-6f8eb9823df9.JPG",
							"created": 1661534576,
							"id": 232
						}
					]
				,
				moreText: '加载更多',
			}
		},
		methods: {
			toType() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.all-box {}

	.search-his {
		margin: 100rpx 30upx 20rpx 30upx;
	}

	.bg-white-alpha {
		background: rgba(255, 255, 255, 0.5);
	}

	.search-his-nav {
		display: flex;
		background-color: #ffffff;
		justify-content: space-between;
	}

	.search-his-nav .search-his-label-left {
		font-weight: bold;

	}

	.search-his-nav .search-his-label-left .search-his-title-left {
		color: #000000 !important;
	}

	.search-his-nav .search-his-label-right {
		color: #78909C !important;
	}

	.search-his-nav .search-his-label-right .search-his-title-right {
		color: #78909C !important;
	}

	.search-his .search-box {
		margin-top: 10rpx;
	}

	.search-his .search-box .search-box-item {
		display: inline-block;
		line-height: 40rpx;
		padding: 10rpx 25rpx;
		margin: 20rpx 10rpx 2rpx 0rpx;
		background-color: #F8F7F8 !important;
		color: #AAAAAA !important;
		border-radius: 2500rpx !important;
	}

	.search-his .search-box .search-box-item {}

	.search-his .search-box .search-box-item .search-box-item-prefix {}

	.margin-10 {
		margin-left: 10rpx;
		color: #78909C !important;
	}
</style>
